<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建朋友圈</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
	<style type="text/css">
		body{
			background: #e9e9e9; 
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		/*新加的二维码*/
		.uploadQrcode_container{
			display: flex;
			align-items: center;
		}
		.uploadQrcode_container button{
			margin-left: 15px;
		}
		.uploadQrcode_container span{
			color: #999;
			font-size: 13px;
		}
		.uploadQrcode_content{
			position: relative;
			width: 150px;
			height: 150px;
			overflow: hidden;
		}
		.qrcodeImg_h{
			width: 150px;
			height: 150px;
		}
		.qrcodeHead_h{
			width: 35px;
			height: 35px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
		.friendPublish_mainVideo_container{
			align-items: flex-end;
			display: flex;
			padding: 0 5px;
		}
		.friendPublish_mainVideoAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
		}
		.friendPublish_mainVideoImgAdd_container input{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 0;	
		} 
		.friendPublish_mainVideoAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainVideo_content{
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<form class="layui-form" id="form1">
		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建朋友圈</p>
				</div>
			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List" id="verificationContainer" >
						<div class="public_formTitle_container">
							<lable class="layui-form-label">使用人员：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
							</div>
							<div class="flex align-start" style="padding: 6px 5px 0px 105px;" id="checkUserCon">
							</div>
						</div>
						<input type="hidden" name="checkUser" id="checkUser"/>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List" id="welcomeContainer">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">文字：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
							  <textarea name="text_content" id="text_content" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
					<div id="otherType">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">其他类型：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareType">
								<input type="radio" lay-filter="shareType" name="shareType" value="1" title="无" checked>
								<input type="radio" lay-filter="shareType" name="shareType" value="2" title="图片">
								<input type="radio" lay-filter="shareType" name="shareType" value="3" title="视频">
								<input type="radio" lay-filter="shareType" name="shareType" value="4" title="图文">
							</div>
						</div>
					</div>
					<!-- 图片 -->
					<div class="public_form_List publicHide_content" id="imgcontainer" style="display: none;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">图片：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<img onerror="this.style.display='none'" id="pic_image" src="" style="width: 100px; height: 100px;">
								<input type="hidden" name="image" id="image" />
								<button type="button" class="layui-btn" onclick="select_img(this)" data-target="image">
								  <i class="layui-icon">&#xe67c;</i>上传图片
								</button>

							</div>
						</div>
					</div>
					
					<!-- 图文 -->
					<div class="public_form_List publicHide_content" id="imgtextcontainer" style="display: none;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">标题：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_title" id="link_title" required   placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">链接：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_url" id="link_url" required   placeholder="请输入链接" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>

					<!-- 视频  -->
					<div class="public_form_List publicHide_content" id="vodio" style="display: none;">
						<!-- 视频 -->

						<div class="public_form_List" style="height: 100px;">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">视频：</lable>
							</div>
							<input type="hidden" id="video" value=""/>
							<div id="video_box">
								<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">
									<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>
									<input type="file" accept="video/*" name="file" id="file" onchange="upload_video()">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">封面图：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block" style="margin-left:0px;">
									<img onerror="this.style.display='none'" id="pic_link_pics" src="" style="width: 100px; height: 100px;">
									<input type="hidden" name="link_pics" id="link_pics" />
									<button type="button" class="layui-btn" onclick="select_img(this)" data-target="link_pics">
									  <i class="layui-icon">&#xe67c;</i>上传封面图
									</button>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" type="button" onclick="substrs()">立即发布</button>
					</div>
				</div>
			</div>
			<!-- 公共表单部分 end-->
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/cusmanage/js/formSelects-v4.min.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		function substrs(){
			var users = $("#checkUser").val();  //员工列表 字符串
			var text = $("#text_content").val(); //文字
			var shareType = $('#shareType input[name="shareType"]:checked').val(); //类型
			var	pic_image = $("#pic_image").attr("src"); 	//图片
			var	video = $("#video").val(); 	//视频
			var	pic_link_pics = $("#pic_link_pics").attr("src");	//视频封面 
			var	link_title = $("#link_title").val(); 	//图文的标题
			var	link_url = $("#link_url").val(); 	//图文的url
			if(!users){
				tusi("请选择员工");
				return false;
			}
			if(shareType == 1 && text == ""){
				tusi("文字不可为空");
				return false;
			}
			if(shareType == 2 && !pic_image){
				tusi("图片信息不完整");
				return false;
			}
			if(shareType == 3 && (!video || !pic_link_pics)){
				tusi("视频信息不完整");
				return false;
			}
			if(shareType == 4 && (!link_title || !link_url)){
				tusi("图文信息不完整");
				return false;
			}
			myAjaxPost(false, true, "", { shareType:shareType,users:users,text:text,pic_image:pic_image,video:video,pic_link_pics:pic_link_pics,link_title:link_title,link_url:link_url}, function (resp) {
				if(resp.status == "success"){
					tusi(resp.msg);
					setTimeout(function(){
	                  	parent.layer.closeAll('iframe');
	                },1000);
				}else{
					tusi(resp.msg);
				}
			})
		}
	</script>
	<script>
		// 添加二维码图片
		layui.use('upload', function(){
		  var $ = layui.jquery
		  ,upload = layui.upload;
		});
	</script>
	<script type="text/javascript">
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
		layui.use('form', function(){
		  var form = layui.form;
		  // 其他类型
		  form.on('radio(shareType)', function (data) {
                if ($('#shareType input[name="shareType"]:checked').val() == "1") {
					$('#image').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#text_content').attr("lay-verify","required");
                    $(".publicHide_content").hide();
                }else if($('#shareType input[name="shareType"]:checked').val() == "2"){
					$('#text_content').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#image').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#imgcontainer").show();
                }else if($('#shareType input[name="shareType"]:checked').val() == "4"){
					$('#text_content').removeAttr("lay-verify");
					$('#image').removeAttr("lay-verify");
					$('#link_title').attr("lay-verify","required");
					$('#link_url').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#imgtextcontainer").show();
                }else if($('#shareType input[name="shareType"]:checked').val() == "3"){
					$('#text_content').removeAttr("lay-verify");
					$('#image').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#interest').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#vodio").show();
                }
                form.render();
            });
		});
	</script>
	<script type="text/javascript">
		$('#addPeople').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择使用人员',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_user.html'
			}); 
		})
	</script>
	<script>
	layui.use(['element', 'layer', 'upload'], function () {
	  var layer = layui.layer;
	});
	function select_img(a){
	  var targetId=a.getAttribute('data-target');
	  layer.open({
		title:'图片库',
		type: 2,
		area: ['700px', '450px'],
		fixed: false, //不固定
		maxmin: false,
		content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  });
	}

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='image'){
		var inputEle=$('#image');
		var prevEle=$('#pic_image');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pic'){
		var inputEle=$('#link_pic');
		var prevEle=$('#pic_link_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pics'){
		var inputEle=$('#link_pics');
		var prevEle=$('#pic_link_pics');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='miniprogram_pic'){
		var inputEle=$('#miniprogram_pic');
		var prevEle=$('#pic_miniprogram_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt.indexOf('part_time_') > -1){ // 分时段 通用
		var inputEle=$('#' + tgt);
		var prevEle=$('#preview_' + tgt);
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }
	};

	function upload_video(){
		var formData = new FormData();
		 formData.append("file",$("#file")[0].files[0]);
		 $.ajax({
			url: "upload_video.html",
			type: "post",
			data: formData,
			processData: false,
			contentType: false,
			success:function(resp){
				$("#file").val('');
				if(resp.status == 'success'){
					$('#video').val(resp.data);
					$(".friendPublish_mainVideoImgAdd_container").hide();
					initVideo(resp.data);
				}else{
					tusi(resp.msg)
				}
			}
		 })
	}

		function initVideo(video){
			$('#video_box').empty();
			var html = '';
			html += '<div class="friendPublish_mainVideo_content">';
			html += '<div class="prism-player" id="player-con" style="float:left"></div>';
			html += '<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">';
			html += '<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>';
			html += '<input type="file" accept="video/*" name="file" id="file" onchange="upload_video()">';
			html += '</div>';
			html += '</div>';
			$('#video_box').append(html);
			var player = new Aliplayer({
			  "id": "player-con",
			  "source": video,
			  "width": "120px",
			  "height": "100px",
			  "autoplay": true,
			  "isLive": false,
			  "rePlay": false,
			  "playsinline": true,
			  "preload": true,
			  "controlBarVisibility": "hover",
			  "useH5Prism": true,
			  "skinLayout": [
				{
				  "name": "bigPlayButton",
				  "align": "blabs",
				  "x": 33,
				  "y": 22
				},
				{
				  "name": "H5Loading",
				  "align": "cc"
				},
				{
				  "name": "errorDisplay",
				  "align": "tlabs",
				  "x": 0,
				  "y": 0
				},
				{
				  "name": "infoDisplay"
				},
				{
				  "name": "tooltip",
				  "align": "blabs",
				  "x": 0,
				  "y": 56
				},
				{
				  "name": "thumbnail"
				},
				{
				  "name": "controlBar",
				  "align": "blabs",
				  "x": 0,
				  "y": 0,
				  "children": [
					{
					  "name": "progress",
					  "align": "blabs",
					  "x": 0,
					  "y": 44
					},
					{
					  "name": "playButton",
					  "align": "tl",
					  "x": 15,
					  "y": 12
					},
					{
					  "name": "timeDisplay",
					  "align": "tl",
					  "x": 10,
					  "y": 7
					},
					{
					  "name": "fullScreenButton",
					  "align": "tr",
					  "x": 10,
					  "y": 12
					},
					{
					  "name": "volume",
					  "align": "tr",
					  "x": 5,
					  "y": 10
					}
				  ]
				}
			  ]
			}, function (player) {
				console.log("The player is created");
			});
		}
	</script>
</body>
</html>